<template>
  <div class="task-column-container">
    <task-card
      ref="card"
      v-for="(card, index) in task_column_setting"
      :key="index"
      :TaskCardSettings="card"
      class="card"
    />
  </div>
</template>

<script lang="ts">
import Vue, { ComponentInstance } from 'vue'
import { Component, Prop, Ref } from 'vue-property-decorator'
import TaskCard from './TaskCard.vue'
import { TaskCardType } from '@/interface/Basic'
import { deepClone } from '@/utils/specificFunc'
@Component({
  components: {
    TaskCard
  }
})
class TaskColumn extends Vue {
  @Ref() card!: ComponentInstance | ComponentInstance[]
  @Prop({ required: true }) TaskColumnSettings!: TaskCardType[]
  task_column_setting: TaskCardType[] = []
  mounted() {
    this.task_column_setting = deepClone(this.TaskColumnSettings)
    this.animateCardList()
  }
  animateCardList() {
    this.$nextTick(() => {
      const cards_list = this.card
      if (Array.isArray(cards_list)) {
        cards_list.forEach((card, index) => {
          card.$el.animate(
            [
              { transform: 'translateY(100px)', opacity: 0 },
              { transform: 'translateY(0)', opacity: 1 }
            ],
            {
              duration: 800,
              easing: 'cubic-bezier(0.52, -0.66, 0.29, 1.33)',
              delay: index * Math.random() * 200,
              fill: 'both'
            }
          )
        })
      } else {
        cards_list.$el.animate(
          [
            { transform: 'translateY(100px)', opacity: 0 },
            { transform: 'translateY(0)', opacity: 1 }
          ],
          { duration: 800, easing: 'cubic-bezier(0.52, -0.66, 0.29, 1.33)', fill: 'both' }
        )
      }
    })
  }
}
export default TaskColumn
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
.task-column-container {
  box-sizing: border-box;
  padding: 0 5px;
  width: 100%;
  overflow: auto;
  .card {
    margin-bottom: 20px;
  }
}
::-webkit-scrollbar {
  width: 0;
}
::-webkit-scrollbar-thumb {
  #color(background-color, --primary-hover-text-color);
}
</style>
